<template>
	<view class="container">
		<view class="content">
			<u-loading-page :loading="isLoading" loading-text="加载中......" loading-mode="semicircle"></u-loading-page>
			<scroll-view class="content-classify" scroll-y>
				<view class="content-classify-item" v-for="(classify, index) in list1" :key="classify.id"
					:class="{ 'active-class': activeIndex === index }" @click="handleClassifyClick(index)">
					<text style="font-size: 14px">{{ classify.name }}</text>
				</view>
			</scroll-view>
			<scroll-view v-if="!isLoading" class="content-body" scroll-y>
				<view class="content-body-item" v-for="(item, index) in list" :key="item.classifyId">
					<u-cell-group :border="false">
						<u-cell :title="item.classifyName" :border="false"></u-cell>
					</u-cell-group>
					<view class="content-body-item1">
						<view class="content-body-item2" v-for="(book, index) in item.bookList" :key="book.id">
							<image v-if="book.photo != null" style="width: 60px; height: 80px" :src="book.photo"
								@click="handleBookDetail(book.id)"></image>
							<view v-if="book.photo == null"
								style="width: 60px; height: 80px; display: flex; justify-content: center; flex-direction: column; background-color: lightgrey; font-size: 14px"
								@click="handleBookDetail(book.id)">
								暂无图片
							</view>
							<text class="book-name" style="font-size: 13px">{{ book.name }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		categoryList,
		secondCategoryList
	} from '@/api/book';
	import config from '@/config';
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	export default {
		data() {
			return {
				classifyId: 0,
				activeIndex: 0,
				isLoading: false,
				list: [],
				list1: []
			};
		},
		onLoad() {
			this.getCategoryList();
		},
		onPullDownRefresh() {
			console.log("下拉刷新触发");
			// 模拟数据请求
			setTimeout(() => {
				this.getCategoryList();
				uni.stopPullDownRefresh(); // 停止刷新动画（必须调用！）
			}, 1000);
		},
		methods: {
			handleClassifyClick(index) {
				this.activeIndex = index;
				console.log(this.activeIndex);
				const classify = this.list1[index];
				this.classifyId = classify.id;
				console.log('classifyId', this.classifyId);
				this.getCategoryList();
				// 这里可以添加加载对应分类数据的逻辑
			},
			async getCategoryList() {
				this.isLoading = true;
				const res = await categoryList();
				if (res.code == 200) {
					this.list1 = res.rows;
					if (this.classifyId == 0) {
						this.classifyId = this.list1[0].id;
					}
					const response = await secondCategoryList(this.classifyId);
					if (response.code == 200) {
						this.list = response.rows;
						this.list.forEach((item) => {
							item.bookList.forEach((book) => {
								if (book.photo != null) {
									book.photo = config.baseUrl + book.photo;
								}
							});
						});
						this.isLoading = false;
					}
				}
			},
			loadmore() {
				this.status = 'nomore';
			},
			handleBookDetail(row) {
				uni.navigateTo({
					url: `/book/book-detail/index?bookId=${row}`
				});
			}
		}
	};
</script>

<style>
	.container {
		position: relative;
		height: 100vh;
		width: 100%;
		background-color: #e0eeee;
	}

	.content {
		display: flex;
		height: 100%;
		justify-content: space-between;
	}

	.content-classify {
		background-color: #ffffff;
		width: 23%;
		height: 100%;
	}

	.content-classify-item {
		width: 100%;
		height: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content-body {
		/* background-color: #FFFFFF; */
		width: 75%;
		height: 100%;
	}

	.content-body-item {
		width: 100%;
		height: auto;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		margin-top: 2%;
	}

	.content-body-item1 {
		width: 100%;
		height: auto;
		flex-wrap: wrap;
		background-color: #ffffff;
		display: flex;
		/* flex-direction: column; */
	}

	.content-body-item2 {
		width: 30%;
		/* height: 15%; */
		margin-left: 2%;
		margin-bottom: 10%;
		gap: 10px;
		flex-direction: column;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.content-body-item-photo {
		width: 60px;
		height: 80px;
		border-radius: 5px;
	}

	.content-body-item-text {
		width: 170px;
		height: 100px;
	}

	/* 注意：这里的 text 选择器可能需要根据你实际使用的框架或环境进行调整，
	   如果 text 不是一个可以直接通过 CSS 选择的元素，你可能需要通过类名或其他方式选择它。
	   但在这个示例中，我们假设它可以直接被选中。 */
	.content-body-item-button {
		width: 59px;
		height: 110px;
		/* background-color: black; */
		margin-left: 12px;
		flex-direction: column;
		display: flex;
		align-items: flex-end;
	}

	.active-class {
		background-color: #e0eeee;
		color: #2979ff;
		border-left: 3px solid #2979ff;
	}

	.book-name {
		display: inline-block;
		max-width: 90px;
		/* 根据实际布局调整 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>